<template>
	<view class="upload-content">
		<block v-for="(item, index) in imageList" :key="index">
			<view class="upload-item">
				<image class="upload-img" :src="item.filePath" mode="aspectFill" @click="previewImage(index)"></image>
				<image class="upload-del-btn" 
					@click="delImage(index)" 
					src="../static/ico_close@2x.png" 
					mode="scaleToFill">
				</image>
				<view class="upload-progress" v-if="item.progress < 100">{{item.progress}}%</view>
			</view>
		</block>
		<view class="upload-add-btn" v-if="rduLength > 0" @click="chooseImage"></view>
		<view class="clear"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			imageList: []
		};
	},
	props: {
		count: {
			type: Number,
			value: 1 //单次可选择的图片数量
		},
		length: {
			type: Number,
			value: 1 //可上传总数量
		},
		isCommit: { // 是否提交
			type:Boolean, 
			default:false
		}
	},
	computed: {
		rduLength(){
			return this.imageList.length==0||(this.length - this.imageList.length);
		}
	},
	methods: {
		//选择图片
		chooseImage: function(){
			uni.chooseImage({
				count: this.rduLength < this.count ? this.rduLength : this.count, //最多可以选择的图片张数，默认9
				sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
				sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有
				success: (res)=> {
					const images = res.tempFilePaths;
					this.uploadFiles(images);
				}
			});
		},
		//上传图片
		async uploadFiles(images){
			this.imageList.push({
				filePath: images[0],
				progress: 0
			});
			uni.showLoading({
				title: '请稍后..',
				mask: true,
			})
			let uploadUrl =''
			try{
				uploadUrl = await this.uploadImage(images[0]);
			}catch(err){
				console.log(err);
				return;
			}
			if(uploadUrl !== false){
				images.splice(0, 1);
				this.imageList[this.imageList.length - 1].src = uploadUrl;
				this.$emit('confirm',this.imageList)
				//判断是否需要继续上传
				if(images.length > 0 && this.rduLength > 0){
					this.uploadFiles(images);
				}else{
					uni.hideLoading();
				}
			}else{
				//上传失败处理dc
				this.imageList.pop();
				uni.hideLoading();
				uni.showToast({
					title: '上传中出现问题，已终止上传',
					icon: 'none',
					mask: true,
					duration: 2000
				});
			}
		},
		uploadImage: function(file){
			return new Promise((resolve, reject)=> {
				//发送给后端的附加参数
				const formData = null
				this.uploadTask = uni.uploadFile({
					url: 'https://www.shunluxiu.com/quickfix-user/user/uploadImg', 
					filePath: file,
					name: 'file',
					formData: formData,
					timeout:'99999',
					header: { "Content-Type": "multipart/form-data" },
					success(uploadFileResult){
						const uploadFileRes = JSON.parse(uploadFileResult.data) || {};
						console.log(uploadFileRes.code)
						if(uploadFileRes){
							resolve(uploadFileRes.result);
						}else{
							reject('上传图片接口返回错误');
						}
					}, 
					fail(){
						reject('网络链接错误');
					}
				});
				//上传进度
				this.uploadTask.onProgressUpdate((progressRes)=> {
					this.imageList[this.imageList.length - 1].progress = progressRes.progress;
				});
			});
		},
		//删除图片
		delImage: function(index){
			uni.showModal({
				content: '确定要放弃这张图片么？',
				success: (confirmRes)=> {
					if (confirmRes.confirm) {
						this.imageList.splice(index, 1);
						this.$emit('confirm',this.imageList)
					} 
				}
			})
		},
		//预览图片
		previewImage: function(index){
			const urls = [];
			this.imageList.forEach((item)=> {
				urls.push(item.filePath);
			})
			uni.previewImage({
				current: urls[index],
				urls: urls,
				indicator: "number"
			})
		}
	}
}
</script>

<style lang="scss">
	.clear{ clear:both}
	.upload-item+.upload-item{
		margin-left:24upx;
	}
	.upload-item{
		position: relative;
		float:left;
		width:200upx;
		height:200upx;
		margin-bottom:30upx;
		.upload-img{
			width:100%;
			height:100%;
			border-radius:8upx;
		}
		.upload-del-btn{
			position: absolute;
			right:-14upx;
			top:-12upx;
			width:34upx;
			height:34upx;
			border-radius: 100px;
		}
		.upload-progress{
			position: absolute;
			left:0;
			top:0;
			display:flex;
			align-items:center;
			justify-content: center;
			width:100%;
			height:100%;
			background-color: rgba(0,0,0,.4);
			color:#fff;
			font-size:24upx;
			border-radius:8upx;
		}
	}
	.upload-add-btn {
		position: relative;
		float:left;
		width: 200upx;
		height: 200upx;
		z-index: 99;
		border-radius:8upx;
		background:#f6f9ff;
		&:before,
		&:after {
			content: " ";
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			width: 4upx;
			height: 60upx;
			background-color: #999999;
		}
		&:after {
			width: 60upx;
			height: 4upx;
		}
		&:active {
			background-color: #f6f9ff;
		}
	}

</style>
